<!-- 冒泡更多 -->
<style rel="stylesheet/scss" lang="scss" >
.pro-crm-home-bubble-more {
  .bubble-more {
    width: 1250px;
    height: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    .el-card__header {
      font-size: 18px;
      font-weight: bold;
    }
    .el-col {
      .el-card {
        min-height: 840px;
      }
    }
    .bubble-type {
      color: #2f6bcf;
      cursor: pointer;
      float: right;
      line-height: 24px;
    }
    .comment-box {
      padding-left: 10px;
      color: #333333;

      .selectImages {
        padding: 0 4px;
        .remove {
          cursor: pointer;
          padding: 0 5px;
          font-size: 14px;
          color: #d24e58;
        }
      }
      .el-textarea {
        margin: 20px 0;
      }
      .comment-box-title {
        font-size: 16px;
      }
      .comment-box-bottom {
        .emoji,
        .image {
          color: darkgray;
          cursor: pointer;
          margin-right: 10px;
        }
        .button-box {
          float: right;
          .el-button {
            width: 100px;
            margin-left: 20px;
            background-color: #2f6bcf;
            border: 0;
          }
        }
      }
    }
  }
  .el-dialog.is-fullscreen {
    background-color: #f0f2f5;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__close {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-dialog__close:hover {
      color: #2f6bcf;
    }
  }
}
</style>
<template>
  <div class="pro-crm-home-bubble-more">
    <el-dialog
      :visible.sync="visible"
      top="0"
      custom-class="more-dialog"
      fullscreen
    >
      <div
        ref="bubbleMoreScroll"
        class="bubble-more"
      >
        <el-row
          :gutter="20"
          style="margin-right:0"
        >
          <el-col :span="18">
            <el-card class="box-card">
              <div slot="header">
                {{ $t('_bubble.bubbleup') }}
                <el-dropdown
                  slot="searchType"
                  @command="changeType"
                  class="bubble-type"
                  trigger="click"
                  placement="bottom"
                >
                  <span class="el-dropdown-link">
                    {{ lang=='zh_CN'?activeType.text:activeType.entext }}<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item) in types"
                      :key="item"
                      :command="item.code"
                    >
                      {{ lang=='zh_CN'?item.text:item.entext }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="info-content">
                <div class="comment-box">
                  <el-input
                    v-model="message"
                    :rows="4"
                    :placeholder="$t('_bubble.sayholder1')"
                    clearable
                    type="textarea"
                    maxlength="600"
                    show-word-limit
                  />
                  <div class="comment-box-bottom">
                    <span
                      ref="emojiBtn"
                      @click.stop.prevent="showEmojis"
                      class="emoji"
                    >
                      <i class="jeicon jeicon-smile" /> {{ $t('_bubble.xuanzebiaoqing') }}
                    </span>
                    <je-emoji-popover
                      :visible="visibleEmoji"
                      :trigger-el="triggerEl"
                      @select="selectEmoji"
                    />
                    <span
                      @click="selectImage"
                      class="image"
                    >
                      <i class="jeicon jeicon-image-o" /> {{ $t('_bubble.xuanzetupian') }}
                    </span>
                    <span
                      v-for="(file,index) in selectImages"
                      :key="index"
                      class="selectImages"
                    >
                      {{ file.name }} <span
                        @click="removeImage(file,index)"
                        class="remove"
                      >x</span>
                    </span>
                    <div class="button-box">
                      <span class="num">{{ messageLength }}/600</span>
                      <el-button
                        @click="sendMsg"
                        type="primary"
                        size="medium"
                      >
                        {{ $t('_bubble.maopao1') }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <bubble-list
                ref="newList"
                :page-size="15"
                @doAct="doAct"
                @doComment="doComment"
                type="new"
                item-type="info"
              />
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header">
                {{ $t('_bubble.remenmaopao') }}
              </div>
              <bubble-list
                ref="hotList"
                :page-size="12"
                @doComment="doComment"
                type="hot"
                autoload
              />
            </el-card>
          </el-col>
        </el-row>
        <i
          @click="visible=false"
          class="el-dialog__close el-icon el-icon-close"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import BubbleList from './bubble_list.vue';
import JEEmojiPopover from '../../../../components/emoji/index.vue';

export default {
  name: 'BubbleMore',
  components: { BubbleList, 'je-emoji-popover': JEEmojiPopover },
  props: [],
  data() {
    return {
      selectImages: [],
      visible: false,
      types: [
        { text: '最新冒泡', entext: 'Latest bubble', code: 'new' },
        { text: '我的冒泡', entext: 'My bubble', code: 'my' },
      ],
      activeType: {},
      message: '',
      messageLength: 0,
      visibleEmoji: false,
      triggerEl: '',
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  watch: {
    message(nv) {
      this.messageLength = nv.length;
    },
  },
  mounted() {
    const me = this;
    me.activeType = me.types[0];
    me.$nextTick(() => {
      Ext.get(me.$el.querySelector('.more-dialog')).on('scroll', (e, t) => {
        me.visibleEmoji = false; // emoji 表情弹框隐藏
        const sign = 50;
        const scrollDistance = t.scrollHeight - t.scrollTop - t.clientHeight;

        if (scrollDistance < sign && !me.getList().loading) {
          me.nextPage();
        }
      });
      Ext.get(me.$el.querySelector('.more-dialog')).on('click', () => {
        me.visibleEmoji = false; // emoji 表情弹框隐藏
      });
    });
  },
  methods: {
    doAct() {
      this.getList('hot').loadPage();
    },
    showEmojis() {
      this.visibleEmoji = !this.visibleEmoji;
      this.triggerEl = this.$refs.emojiBtn;
    },
    /**
     * 冒泡
     */
    sendMsg() {
      if (JE.isEmpty(this.message.trim())) {
        return JE.msg(`${this.$t('alert.alert1')}~`);
      }
      if (this.message.length > 600) {
        return JE.msg(this.$t('alert.alert4'));
      }
      const obj = JE.ajax({
        url: '/je/portal/homePortal/sendBubbleMsg',
        params: { MPXX_XXNR: this.message, MPXX_MPTP: Ext.encode(this.selectImages) },
      });
      if (obj.success) {
        JE.msg(`${this.$t('alert.alert3')}~`);
        this.message = '';
        this.selectImages = [];
        this.getList().data.unshift(obj.obj);
        this.getList('hot').loadPage();
      }
    },
    changeType(type) {
      const me = this;
      me.activeType = me.types[type == 'my' ? 1 : 0];
      const list = me.getList('new');
      list.type = me.activeType.code;
      list.loadPage(1, type);
    },
    /**
     * 选择表情
     */
    selectEmoji(emoji) {
      this.message += emoji;
    },
    /**
     * 选择图片
     */
    selectImage() {
      const me = this;
      JE.uploadFile({
        fileTypes: 'jpg;png;gif;jpeg',
        // params: {
        //   returnType: 'all',
        //   jeFileType: 'PROJECT',
        // },
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          // delete file.docInfo;
          // delete file.size;
          me.selectImages = [file];
        },
      });
    },
    /**
     * 删除图片
     */
    removeImage(file, index) {
      this.selectImages.splice(index, 1);
    },
    getList(type) {
      const types = type || 'new';
      return this.$refs[`${types}List`];
    },
    show() {
      const me = this;
      me.visible = true;
      me.$nextTick(() => {
        me.getList().loadPage();
        me.getList('hot').loadPage();
      });
    },
    nextPage() {
      const me = this;
      me.getList().scrollPage(me.activeType.code);
    },
    doComment(item, index) {
      this.$emit('showInfo', item, index);
    },
  },
};
</script>
